<template>
	<div id="">
		<div id="" v-if="nullbox">
			<div id="" style="font-size: 0.4rem;margin-top: 1vh;">
				<van-row>
					<van-col span="6">
						<div id="">
							购物车
						</div>
					</van-col>
					<van-col span="6" offset="12" @click="clearAll">清空</van-col>
				</van-row>
				<van-row style="text-align: left;">
					<van-col span="20" offset="1">
						<div id="">
							共:<span>{{number}}</span>
						</div>
					</van-col>
				</van-row>

			</div>
			<div id="right" style="display: flex;margin-top: 2vh;box-shadow: 2px 2px 2px 2px #f1f1f1;
		border-radius: 10px;margin-top: 1vh;" v-for="(item,index) in cart">
				<div id="" style="width: 6vw;margin-top: 2vh;">
					<input type="checkbox" :value="index" v-model="box" @change="all" class="checkbox">
				</div>
				<div id="" style="width: 95vw;text-align: left;"
					@click="$router.push({path:'/details',query:{goods_id:item.goods_id}})">
					<van-swipe-cell>
						<van-card :num="item.number" :price="item.price" :desc="item.remark" :title="item.goods_name"
							class="goods-card" :thumb="url+item.goods_img" />
						<template #right style="text-align: center; ">
							<van-button square text="找相似" type="danger" class="delete-button"
								style="height: 20vh;width: 7vw;" color="#FFCE45" />
							<van-button square text="移入收藏夹" type="danger" class="delete-button"
								style="height: 20vh;width: 7vw;" color="#F16C2D" @click="shoucang" />
							<van-button square text="删除" type="danger" class="delete-button"
								style="height: 20vh;width: 7vw;" color="#F03131" @click="del(item.id)" />
						</template>
					</van-swipe-cell>
				</div>
			</div>
			<div id="bar_" style="margin-bottom: 10vh;">
				<van-submit-bar :price="total" button-text="结算" @submit="onSubmit">
					<input type="checkbox" @change="checkall" v-model="quanxuan" class="checkbox">全选
				</van-submit-bar>
			</div>
		</div>
		<div id="null" v-else>
			<van-empty description="购物车暂无商品" />
			<van-button style="width: 40vw;margin-top: 20vh;background: #1E1E1E;color: #FFFFFF;"
				@click="$router.push('/')">立即添加</van-button>
		</div>
	</div>
</template>

<script>
	import {
		Dialog
	} from 'vant';
	import {
		Toast
	} from 'vant';
	export default {
		data() {
			return {
				box: [],
				cart: [],
				checked: true,
				radio: 1,
				url: '',
				nullbox: true,
				quanxuan: false
			}
		},
		created() {
			this.getcart()
			this.$store.dispatch('user/vuexUrl', '地址')
				.then(e => {
					this.url = e
					console.log(e)
				})
		},
		computed: {
			number() {
				var number = 0
				for (var i = 0; i < this.box.length; i++) {
					number += this.cart[i].number * 1
				}
				return number * 1
			},
			total() {
				var total = 0
				for (var i = 0; i < this.box.length; i++) {
					total += this.cart[i].number * this.cart[i].price
				}
				return total * 100
			}
		},
		methods: {
			checkall() {
				if (this.cart.length == this.box.length) {
					this.box = []
				} else {
					this.box = []
					for (var i = 0; i < this.cart.length; i++) {
						this.box.push(i)
					}
				}
			},
			all() {
				if (this.box.length == this.cart.length) {
					this.quanxuan = true
				} else {
					this.quanxuan = false
				}
			},
			onSubmit() {
				this.$router.push('/settlement')
			},
			del(id) {
				this.$store.dispatch('user/vuexDelCart', id)
					.then(e => {
						console.log(e)
						Toast.success('删除成功');
						this.getcart()
					})
			},
			getcart() {
				const userInfo = JSON.parse(localStorage.getItem('login'))
				console.log(userInfo)
				if (userInfo) {
					this.$store.dispatch('user/vuexGetCart', userInfo.member_id)
						.then(e => {
							this.cart = e.data.data
							if (!this.cart.length) {
								this.nullbox = false
							} else {
								this.nullbox = true
							}

							console.log(this.cart, 99999999)
						})
				} else {
					return
				}

			},
			clearAll() {
				const userInfo = JSON.parse(localStorage.getItem('login'))
				console.log(userInfo)
				this.$store.dispatch('user/vuexClearAll', userInfo.member_id)
					.then(e => {
						this.cart = e.data.data
						console.log(this.cart.length, 21)
						if (!this.cart.length) {
							this.nullbox = false
						}
						Toast.success('清空购物车成功');
						console.log(e)
					})
			},
			shoucang() {
				// localStorage.setItem('shuju', JSON.stringify(this.xqy))
			}
		}
	}
</script>

<style scoped="scoped">
	.goods-card {
		margin: 0;
		background-color: @white;
	}

	.delete-button {
		height: 50%;
		width: 5vw;
	}

	#right .van-button--normal {
		padding: 18px 12px 65px 12px !important;
	}

	#right .van-card {
		font-size: 0.3rem;
	}

	.van-submit-bar {
		bottom: 65px !important;
	}

	#bar_ .van-button--danger {
		background: #222222;
	}

	#bar_ .van-button--round {
		border-radius: 5px;
	}

	#bar_ .van-submit-bar__button {
		width: 100px;
	}

	#null {
		width: 100vw;
		height: 80vh;
	}

	.checkbox:checked {
		background: #1673ff
	}

	.checkbox {

		outline: none;
		width: 5vw;
		height: 3vh;
		background-color: #ffffff;
		border: solid 1px #ccc;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		font-size: 0.8rem;
		margin: 0;
		padding: 0;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		-webkit-user-select: none;
		user-select: none;

	}

	.checkbox:checked::after {
		content: '';
		top: 5px;
		left: 5px;
		position: absolute;
		background: transparent;
		border: #fff solid 2px;
		border-top: none;
		border-right: none;
		height: 6px;
		width: 10px;
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
</style>
